{% extends "admin/base.html" %}

{% block title %}课程管理{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
    <!-- 搜索栏 -->
    <form id="courseSearchForm" action="/admin/course/search-course" method="GET" class="relative w-full md:w-1/2 lg:w-1/3">
        <input
            type="text"
            name="keyword"
            placeholder="搜索课程编号/名称"
            class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 text-sm"
            aria-label="课程搜索"
            value="{{ keyword }}"
            id="keyword"
        >
        <button
            type="submit"
            class="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary focus:outline-none bg-transparent p-0 m-0 transition-colors"
        >
            <i class="fa fa-search"></i>
        </button>
    </form>

    <!-- 新增按钮 -->
    <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-colors flex items-center justify-center" id="addCourseBtn">
        <i class="fa fa-plus mr-2"></i> 新增课程
    </button>
</div>


        {% if search_keyword %}
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-4">
    <p class="text-sm text-blue-700">
        <i class="fa fa-search mr-2"></i>搜索结果："{{ search_keyword }}"（共 {{ student_list|length }} 条记录）
    </p>
</div>
{% endif %}
<div class="bg-white rounded-lg shadow-md p-6">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程编号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">学科</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任课教师</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课时间</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody id="courseTableBody">
                {% for course in courses %}
                <tr data-course-id="{{ course.id }}" class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_code }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.course_name }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.department }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.teacher.username }}</td>
                    <td class="px-6 py-4 text-sm text-gray-900">{{ course.description }}</td>
                    <td class="px-6 py-4 text-right">
                        <button class="text-primary hover:text-primary/80 mr-2 edit-btn">
                            <i class="fa fa-pen-alt mr-1"></i> 编辑
                        </button>
                        <button class="text-red-500 hover:text-red-700 delete-btn">
                            <i class="fa fa-trash-alt mr-1"></i> 删除
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if not courses %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-book text-4xl text-primary/10 animate-spin"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">暂无课程记录</h3>
        <p class="text-gray-500 mb-6">点击「新增课程」按钮创建新课程</p>
        <button class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg transition-colors" id="addCourseBtn">
            <i class="fa fa-plus mr-2"></i> 新增课程
        </button>
    </div>
    {% endif %}
</div>

<!-- 模态框 -->
<div id="modal" class="fixed inset-0 flex items-center justify-center z-50 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-4xl p-6 md:p-8 transform scale-95 transition-transform duration-300" id="modalContent">
        <!-- 关闭按钮 -->
        <button class="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors" id="close-model">
            <i class="fa fa-times text-gray-500"></i>
        </button>

        <!-- 标题和图标 -->
        <div class="flex items-center mb-6">
            <div id="modalIcon" class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center mr-3">
                <i class="fa fa-book text-primary"></i>
            </div>
            <h2 class="text-xl font-bold text-gray-800" id="modalTitle">新增课程</h2>
        </div>

        <!-- 表单 -->
        <form id="courseForm" class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <input type="hidden" id="courseId" name="id">

            <!-- 基础信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-info-circle text-gray-500 mr-2"></i> 基础信息
                </h3>

                <!-- 课程代码 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="courseCode">课程代码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-code"></i>
                        </span>
                        <input type="text" id="courseCode" name="courseCode" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 课程名称 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="courseName">课程名称</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-font"></i>
                        </span>
                        <input type="text" id="courseName" name="courseName" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 学分 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="credit">学分</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-star"></i>
                        </span>
                        <input type="number" id="credit" name="credit" min="1" max="5" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 课程类型 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="courseType">课程类型</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-tags"></i>
                        </span>
                        <select id="courseType" name="courseType" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                            <option value="">请选择类型</option>
                            <option value="必修课">必修课</option>
                            <option value="选修课">选修课</option>
                            <option value="实验课">实验课</option>
                            <option value="实践课">实践课</option>
                        </select>
                    </div>
                </div>

                <!-- 院系 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="department">所属院系</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-building"></i>
                        </span>
                        <input type="text" id="department" name="department" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>
            </div>

            <!-- 时间地点与教师信息卡片 -->
            <div class="bg-gray-50 rounded-xl p-5 space-y-4 w-full md:col-span-1">
                <h3 class="text-sm font-semibold text-gray-700 mb-3 flex items-center">
                    <i class="fa fa-calendar-check text-gray-500 mr-2"></i> 时间地点与教师
                </h3>

                <!-- 任课教师 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="teacherId">任课教师</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <select id="teacherId" name="teacherId" class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                            <option value="">请选择教师</option>
                            {% for teacher in teachers %}
                            <option value="{{ teacher.id }}">{{ teacher.username }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- 上课地点 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="location">上课地点</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-map-marker"></i>
                        </span>
                        <input type="text" id="location" name="location" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 上课时间 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="time">上课时间</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-clock"></i>
                        </span>
                        <input type="datetime-local" id="time" name="time" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20" required>
                    </div>
                </div>

                <!-- 课程描述 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1" for="description">课程描述</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-file-text"></i>
                        </span>
                        <textarea id="description" name="description" rows="3" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20"></textarea>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="w-full flex items-center justify-end pt-4 space-x-4 md:col-span-2">
                <button type="button" class="px-5 py-2.5 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50" id="cancelButton">
                    <i class="fa fa-times mr-1"></i> 取消
                </button>
                <button type="button" id="saveButton" class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 shadow-md hover:shadow-lg">
                    <i class="fa fa-check mr-1"></i> 保存
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 引入分离的JS文件 -->
<script src="{{ url_for('static', filename='js/admin_js/admin_course.js') }}"></script>
{% endblock %}